<template>
  <div class="outer">
    <h1>App中的Count{{ count }}</h1>
    <h1>App中的数组{{ list }}</h1>
    <button @click="unmountCount">我不想再接受list传递的count数据了</button>
    <List @count="getCount" @list="getItem" ref="list" />
    <hr />
    <Header ref="header" />
  </div>
</template>

<script>
import List from "./components/List";
import Header from "./components/Header";
export default {
  name: "App",
  data() {
    return {
      count: 0,
      list: [],
    };
  },
  components: {
    List,
    Header,
  },
  mounted(){
    this.$refs.header.$once('count',(value) => {
      alert(value)
    })
  },
  methods:{
    getCount(count){
        this.count = count
    },
    getItem(item){
        this.list.push(item)
    },
    unmountCount(){
      this.$refs.list.$off(['count','list'])
    }
  }
};
</script>

<style scoped>
.outer {
  height: 400px;
  background: yellowgreen;
}
</style>